<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>tqf股票</title>
    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="../js/main.js"></script>
    <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 10%;
            left: 30%;
            width: 650px;
            height: 500px;
            border: 16px solid lightblue;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
</head>
<body>
<h1>股票列表</h1>
<form action="" id="mainForm" method="post">
    <div class="right">
        <div class="rightCont">
            <div class="zixun fix">
                <table class="tab2" width="100%">
                    <tr>
                        <th>id</th>
                        <th>股票代码</th>
                        <th>股票名称</th>
                        <th>k值</th>
                        <th>k值涨跌</th>
                        <th>是否龙头</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>

                    <tbody id="tbodydata">

                    </tbody>
                </table>
                <div class='page fix'>
                    共 <b>4</b> 条
                    <a href='###' class='first'>首页</a>
                    <a href='###' class='pre'>上一页</a>
                    当前第<span>1/1</span>页
                    <a href='###' class='next'>下一页</a>
                    <a href='###' class='last'>末页</a>
                    跳至&nbsp;<input type='text' value='1' class='allInput w28' />&nbsp;页&nbsp;
                    <a href='###' class='go'>GO</a>
                </div>
            </div>
        </div>
    </div>
</form>

<!--弹出层开始-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
    <div style="text-align: right; cursor: default; height: 40px;" id="move">
        <span style="font-size: 30px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
    </div>
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
<!--结束-->
<script type="text/javascript">
    $(function () {
        refurbishIndex();
    })


    function refurbishIndex(){
        $.ajax({
            type:"get",
            url:url+"/getTodayData",
            data:{},
            success:function (data) {
                var str="";
                for (i in data) {
                    // console.log(data);
                    var updownStr="";
                    if( data[i].updown==0){
                        updownStr= "<td align='center' style='color: #00ff2c;'>↓↓↓</td>";
                    }else{
                        updownStr="<td align='center' style='color: red;'>↑↑↑</td>";
                    }

                    var topStr="";
                    if( data[i].top==1){
                        topStr= "<td align='center' style='font-weight: 700;color: #3F51B5;'>是</td>";
                    }else{
                        topStr="<td align='center' style='color: red;'></td>";
                    }

                    var trCss="";
                    if(i%2==0){
                        trCss= "style='background: #f3efef;'";
                    }else{
                        trCss= "";
                    }

                    str += "<tr "+trCss+">" +
                        "<td align='center'>" + data[i].id + "</td>" +
                        "<td align='center'>" + data[i].stockNo + "</td>" +
                        "<td align='center'  onclick=\"ShowDiv('MyDiv','fade','"+ data[i].stockNo+"','"+ data[i].stockName+"')\">" + data[i].stockName + "</td>" +
                        "<td align='center'>" + data[i].kvalue +"</td>" +
                         updownStr+
                         topStr+
                        "<td align='center' onclick=\"ShowDiv('MyDiv','fade','"+ data[i].stockNo+"','"+ data[i].stockName+"')\">" + data[i].updateTime + "</td>" +
                        "<td>\n" +
                        "<a href=\"#\" onclick=\"updateTop('"+ data[i].id+"','"+ data[i].top+"')\">修改龙头</a>\n" +
                        "　　<a href=\"#\">删除</a>\n" +
                        "</td>"
                    "</tr>";
                }

                document.getElementById("tbodydata").innerHTML=str;

            }
        });
    }
    
    
    function updateTop(id,top) {
        console.log(id);
        console.log(top);
        var topValue=1;
        if(top==1){
            topValue=0;
        }
        $.ajax({
            url: url+"/updateStock/"+id+"/"+topValue,
            type: "get",
            data: {},
            success: function (data) {
                location.reload()
            }
        })
    }


    //弹出隐藏层
    function ShowDiv(show_div,bg_div,no,nameNo){
        document.getElementById(show_div).style.top=($(document).scrollTop())+100+"px";
        document.getElementById(show_div).style.display='block';
        console.log($(document).scrollTop());
        document.getElementById(bg_div).style.display='block' ;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
        $("#"+bg_div).height($(document).height());

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var xAisList=new Array()
        var yAisList=new Array()
        $.ajax({
            type:"get",
            url:url+"/getKValueById/"+no,
            data:{},
            success:function (data) {
                for(var i=0;i<data.length;i++){
                    xAisList[i]=data[i].id;
                    yAisList[i]=data[i].kvalue;
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: nameNo+'K线图'
                    },
                    //收缩
                    dataZoom: [
                        {
                            show: true,
                            // realtime: true,
                            start: 0,
                            end: 100,
                            xAxisIndex: [0]
                        }
                    ],
                    //鼠标放节点处数据展示
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAisList,
                        scale:true  // 缩放操作时 控制X轴的值
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAisList,
                        type: 'line'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        });

    };
    //关闭弹出层
    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };





</script>
</body>
</html>